﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
div {
    border: 1px solid black;
	margin-right: 15px;
}
</style>
</head>
<body>

<div id="scPH">
<br/>
<div id="scrollVert" style="overflow: hidden; width: 100px; height: 100px; ">
     <div style="width: 10000px; height: 100px; background: lightblue; border: 0px;">
		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>
					slide #0
				</td>
			</tr>

		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>
					slide #1
				</td>
			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>
					slide #2
				</td>
			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>

				<td>
					slide #3
				</td>
			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>
					slide #4
				</td>

			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>
					slide #5
				</td>
			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>
					slide #6
				</td>
			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">

			<tr>
				<td>
					slide #7
				</td>
			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>

					slide #8
				</td>
			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>
					slide #9
				</td>

			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>
					slide #10
				</td>
			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>
					slide #11
				</td>
			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">

			<tr>
				<td>
					slide #12
				</td>
			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>

					slide #13
				</td>
			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>
					slide #14
				</td>

			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>
					slide #15
				</td>
			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>
					slide #16
				</td>
			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">

			<tr>
				<td>
					slide #17
				</td>
			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>

					slide #18
				</td>
			</tr>
		</table>

		<table style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; float: left; border: 0px solid black; border-collapse:collapse;">
			<tr>
				<td>
					slide #19
				</td>

			</tr>
		</table>

     </div>
</div>
<a href="javascript:Demo.scv.prev();">prev</a>
<a href="javascript:Demo.scv.next();">next</a><br/>
<a href="javascript:Demo.scv.stop();">stop</a><br/>
<a href="javascript:Demo.scv.start(true);">start back</a>
<a href="javascript:Demo.scv.start();">start</a>

<br/>
<br/>
<div id="scrollc" style="overflow: hidden; width: 100px; height: 100px; ">
     <div style="width: 100px; height: 100px; background: lightblue; border: 0px;">
		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #0
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #1
		</div>

		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #2
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #3
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #4
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #5
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #6
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #7
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">

			slide #8
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #9
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #10
		</div>

		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #11
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #12
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #13
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #14
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #15
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #16
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">

			slide #17
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #18
		</div>
		&nbsp;

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;" class="slide">
			slide #19
		</div>

		&nbsp;

     </div>
</div>
<a href="javascript:Demo.scc.prev();">prev</a>
<a href="javascript:Demo.scc.next();">next</a><br/>
<a href="javascript:Demo.scc.stop();">stop</a><br/>
<a href="javascript:Demo.scc.start(true);">start back</a>
<a href="javascript:Demo.scc.start();">start</a>
<br/>

<br/>
<div id="scrolld" style="overflow: hidden; width: 100px; height: 205px; ">
     <div style="width: 100px; height: 10000px; background: lightblue; border: 0px;">
		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">
			slide #0
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">
			slide #1
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">

			slide #2
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">
			slide #3
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">
			slide #4
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">

			slide #5
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">
			slide #6
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">
			slide #7
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">

			slide #8
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">
			slide #9
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">
			slide #10
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">

			slide #11
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">
			slide #12
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">
			slide #13
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">

			slide #14
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">
			slide #15
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">
			slide #16
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">

			slide #17
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">
			slide #18
		</div>

		<div style="width: 100px; height: 100px; background: lightgreen; border-color: lightcoral; border: 0px solid black;margin-bottom: 5px;" class="slide">
			slide #19
		</div>

     </div>

</div>
<a href="javascript:Demo.scd.prev();">prev</a>
<a href="javascript:Demo.scd.next();">next</a><br/>
<a href="javascript:Demo.scd.stop();">stop</a><br/>
<a href="javascript:Demo.scd.start(true);">start back</a>
<a href="javascript:Demo.scd.start();">start</a>
<br/>
<br/>
<div id="scrollHor" style="overflow: hidden; width: 100px; height: 218px;">
	<div style="width: 100px; background: lightblue; border: 0px; height: 1000px;">
		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">

			slide #0
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #1
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #2
		</div>

		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #3
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #4
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #5
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #6
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #7
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #8
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">

			slide #9
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #10
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #11
		</div>

		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #12
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #13
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #14
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #15
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #16
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #17
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">

			slide #18
		</div>
		<br/>

		<div style="width: 98px; height: 98px; background: lightgreen; border-color: lightcoral;" class="slide">
			slide #19
		</div>
		<br/>

	</div>
</div>

<a href="" id="prev">prev</a>
<a href="" id="next">next</a><br/>
<a href="" id="stop">stop</a><br/>
<a href="" id="startback">start back</a>
<a href="" id="start">start</a>
<a href="" id="change">Change transition speed</a>
<br/>
<br/>
</div>

	<script type="text/javascript" charset="utf-8" src="../../../src/loader.js"></script>
	<script type="text/javascript">		HmJS.$JSManager.$basepath = '../../../src/'; var Demo = {};</script>
	<script type="text/javascript" charset="utf-8" src="../../../src/demo/action/util/effect/scroller.js"></script>
</body>
</html>


